CODAP-281: animate slider axis when value is edited outside bounds by bfinzer · Pull Request #2413 · concord-consortium/codap

bfinzer · 2026-02-20T00:22:23Z

Summary

When the user edits the slider value text to a value outside the current axis range, the axis now smoothly animates (~500ms ease-out) to encompass the new value, matching V2 behavior
The thumb slides into view along with the axis rather than the axis snapping instantly
Animation uses the axis model existing volatile setDynamicDomain mechanism so undo/redo captures only the final state

Test plan

Open a slider, type a value beyond the axis max (e.g. 100 when max is ~11), verify smooth axis animation with thumb sliding into view
Type a value below the axis min, verify animation works in the other direction
Type a value within the current axis range, verify no animation (instant update)
Rapid successive edits: type one out-of-range value, then quickly another -- verify animation restarts cleanly
Undo/redo after an animated value change restores old bounds and value correctly
Drag the slider thumb -- verify no animation (dragging behavior unchanged)
Test with a date slider axis

When the user edits the slider value text to a value outside the current axis range, the axis now smoothly animates to encompass the new value, matching V2 behavior. The thumb slides into view along with the axis. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

cypress · 2026-02-20T00:26:46Z

codap-v3 Run #10360

Run Properties: Passed #10360 • d668ab73a0: Increment the build number

Project	`codap-v3`
Branch Review	`main`
Run status	`Passed #10360`
Run duration	`02m 13s`
Commit	`d668ab73a0: Increment the build number`
Committer	`eireland`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`4`
View all changes introduced in this branch ↗︎

codecov · 2026-02-20T01:48:22Z

Codecov Report

❌ Patch coverage is 84.37500% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 85.50%. Comparing base (d338a5c) to head (00a8eb3).
⚠️ Report is 22 commits behind head on main.

Files with missing lines	Patch %	Lines
...src/components/slider/use-slider-axis-animation.ts	81.13%	10 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #2413    +/-   ##
========================================
  Coverage   85.50%   85.50%            
========================================
  Files         755      756     +1     
  Lines       41873    41931    +58     
  Branches     9962    10376   +414     
========================================
+ Hits        35802    35853    +51     
- Misses       6059     6063     +4     
- Partials       12       15     +3

Flag	Coverage Δ
cypress	`69.26% <84.74%> (+0.03%)`	⬆️
jest	`56.95% <10.93%> (-0.07%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…mation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Adds smooth axis rescaling animation when a slider’s value is edited via the text field to a value outside the current axis bounds, matching prior (V2) behavior while keeping undo/redo scoped to the final persisted bounds.

Changes:

Introduces a useSliderAxisAnimation() hook that animates the axis domain via requestAnimationFrame using the axis model’s volatile dynamic domain.
Updates SliderModel to track an “axis animating” state and skip value clamping during animation-driven domain updates.
Adds clearDynamicDomain() to numeric axis models and wires the editable value field to use the new animation hook.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
v3/src/components/slider/use-slider-axis-animation.ts	New hook implementing animated axis domain transitions for out-of-range typed values.
v3/src/components/slider/slider-model.ts	Adds `_isAxisAnimating` flag and gates axis-domain reaction to avoid clamping during animation.
v3/src/components/slider/editable-slider-value.tsx	Routes blur-submit value edits through the new animation hook instead of direct model changes.
v3/src/components/axis/models/base-numeric-axis-model.ts	Adds `clearDynamicDomain()` helper for resetting volatile dynamic domain overrides.

Comments suppressed due to low confidence (1)

v3/src/components/slider/slider-model.ts:160

The new _isAxisAnimating gate changes axis.domain reaction behavior but isn't covered by existing SliderModel tests. Please add/extend unit tests to verify (1) when _isAxisAnimating is true, domain changes do not clamp value, and (2) once animation ends/cancels, the value is clamped again if it is outside the current domain.

      addDisposer(self, reaction(
        () => self.axis.domain,
        ([axisMin, axisMax]) => {
          // skip constraining value during axis animation (value is intentionally outside bounds)
          if (self._isAxisAnimating) return
          // keep the thumbnail within axis bounds when axis bounds are changed
          if (self.value < axisMin) self.setDynamicValueIfDynamic(axisMin)
          if (self.value > axisMax) self.setDynamicValueIfDynamic(axisMax)
        }, { name: "SliderModel [axis.domain]" }

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

v3/src/components/slider/use-slider-axis-animation.ts

Address Copilot review feedback: - Guard cancelAnimation with isAlive() to prevent calling MST actions on destroyed nodes during unmount - Set isAxisAnimating false before clearing dynamic domain so the axis domain reaction can constrain the value if needed Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kswenson

👍 Looks good -- the following review was developed in conjunction with Claude Code 🤖.

PR Review Summary

Changes: 4 files, +122 / -15 lines

What it does

When the user types a slider value outside the current axis range, the axis now smoothly animates (~500ms ease-out cubic) to encompass the new value, with the thumb sliding into view. Previously the axis would snap instantly. This matches V2 behavior.

The approach

A new useSliderAxisAnimation hook applies the model change atomically first (for clean undo/redo), then animates the visual transition via the axis volatile dynamicMin/dynamicMax using requestAnimationFrame. A _isAxisAnimating flag prevents the domain reaction from clamping the value during animation.

Assessment

Clean, well-structured implementation. Edge cases handled well (rapid edits, unmount, undo during animation, model destruction). All CI passing including full regression suite.

Commits during review

Replace non-null assertions with const assignment in useSliderAxisAnimation
Add isAlive guard and fix cleanup ordering in useSliderAxisAnimation (Copilot feedback)

bfinzer added v3 CODAP v3 run regression labels Feb 20, 2026

bfinzer requested a review from kswenson February 20, 2026 00:22

github-actions bot temporarily deployed to development February 20, 2026 00:26 Inactive

Replace non-null assertions with const assignment in useSliderAxisAni…

878d090

…mation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kswenson requested a review from Copilot February 22, 2026 01:38

Copilot started reviewing on behalf of kswenson February 22, 2026 01:38 View session

github-actions bot temporarily deployed to development February 22, 2026 01:42 Inactive

Copilot AI reviewed Feb 22, 2026

View reviewed changes

v3/src/components/slider/use-slider-axis-animation.ts Show resolved Hide resolved

v3/src/components/slider/use-slider-axis-animation.ts Show resolved Hide resolved

github-actions bot temporarily deployed to development February 22, 2026 01:53 Inactive

kswenson approved these changes Feb 22, 2026

View reviewed changes

bfinzer merged commit 14ae042 into main Feb 22, 2026
26 of 27 checks passed

bfinzer deleted the CODAP-281-slider-axis-animate branch February 22, 2026 17:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CODAP-281: animate slider axis when value is edited outside bounds#2413

CODAP-281: animate slider axis when value is edited outside bounds#2413
bfinzer merged 3 commits intomainfrom
CODAP-281-slider-axis-animate

bfinzer commented Feb 20, 2026 •

edited by atlassian bot

Loading

Uh oh!

cypress bot commented Feb 20, 2026 •

edited

Loading

Uh oh!

codecov bot commented Feb 20, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

kswenson left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

bfinzer commented Feb 20, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

cypress bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

codap-v3 Run #10360

Uh oh!

codecov bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

kswenson left a comment

Choose a reason for hiding this comment

PR Review Summary

What it does

The approach

Assessment

Commits during review

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bfinzer commented Feb 20, 2026 •

edited by atlassian bot

Loading

cypress bot commented Feb 20, 2026 •

edited

Loading

codecov bot commented Feb 20, 2026 •

edited

Loading